<template>
  <MovieFilterBase
    :show-sort="showSort"
    :show-filters="showFilters"
    :show-stats="showStats"
    :show-genre-filter="showGenreFilter"
    :show-universe-filter="showUniverseFilter"
    :show-language-filter="showLanguageFilter"
    :show-country-filter="showCountryFilter"
    :show-ai-filter="showAiFilter"
    :movie-count="movieCount"
    :has-more="hasMore"
    :extra-info="extraInfo"
    :initial-filters="initialFilters"
    :initial-sort="initialSort"
    :sort-options="sortOptions"
    @update:filters="$emit('update:filters', $event)"
    @update:sort="$emit('update:sort', $event)"
    @clear-filters="$emit('clear-filters')"
  />
</template>

<script setup lang="ts">
import MovieFilterBase from './MovieFilterBase.vue'

// Props
interface Props {
  showSort?: boolean
  showFilters?: boolean
  showStats?: boolean
  showGenreFilter?: boolean
  showUniverseFilter?: boolean
  showLanguageFilter?: boolean
  showCountryFilter?: boolean
  showAiFilter?: boolean
  movieCount?: number
  hasMore?: boolean
  extraInfo?: string
  initialFilters?: Record<string, string>
  initialSort?: string
  sortOptions?: Array<{
    key: string
    label: string
    icon: string
  }>
}

defineProps<Props>()

// Emits
defineEmits<{
  'update:filters': [filters: Record<string, string>]
  'update:sort': [sort: string]
  'clear-filters': []
}>()
</script>
